import React from 'react';
import styled from 'styled-components';
import {Callout} from "@blueprintjs/core";
import {IconNames} from "@blueprintjs/icons";

const StyledRules = styled(Callout)`
background: #f7f6f6;
font-family: 'Comic Neue', cursive;
margin-bottom: 5px;
display: none;
@media only screen and (min-width: 1360px) and (min-height: 768px) {
    display: block;
}
`;

export function Rules() {
    const rules = {
        'v': {
            title: 'j  q x y 和 ü 组成音节的规律',
            items: [
                '小ü小ü真淘气，碰到j q x y，去掉两点还读ü注意：j q x y从不和u在一起 ',
                'ü只有六个声母朋友，和j q x y交朋友是要去掉两点的，和n l交朋友不能去掉。',
            ]
        }
    };


    return <div>
        {Object.keys(rules).map(key=>{
            return <StyledRules key={key} icon={IconNames.INFO_SIGN} title={rules[key].title}>
            <ul>
                {rules[key].items.map(item=><li>{item}</li>)}
            </ul>
            </StyledRules>
        })}
    </div>
}
